<template>
  <div style="margin-top: 20px">
    <a-directory-tree
      default-expand-all
      :treeData="fileList"
      show-icon
      :selectedKeys="selectedKeys"
      @select="onSelect"
    >
      <a-icon slot="icon-folder" type="folder" />
      <a-icon slot="icon-file" type="file" />
    </a-directory-tree>
    <empty v-if="fileList.length === 0" description="请先选择主题" />
  </div>
</template>

<script>
import { Tree, Empty } from 'ant-design-vue'
import ADirectoryTree from 'ant-design-vue/es/tree/DirectoryTree'

export default {
  name: 'TreeFileNode',
  components: {
    ADirectoryTree,
    Empty,
    Tree
  },
  props: {
    fileList: {
      type: [Array, Object],
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      selectedKeys: []
    }
  },
  methods: {
    // 变更文件
    onSelect (keys, event) {
      const filePath = event.node.value
      if (filePath) {
        this.$emit('changeFile', {
          filePath
        })
      }
    }
  }
}
</script>

<style scoped>
</style>
